<template>
    <div class="rank-box">
        <div class="rb-top">
            <img :src="allRankData.pic_s444" alt="">
        </div>
        <ul>
            <li v-for="(item,index) in allRankData.content" :key="index">
                <p>{{ item.album_title }}</p>
            </li>
        </ul>
        <a href="https://music.163.com/#/discover/toplist?id=19723756" target="_blank" class="fr">更多</a>
    </div>
</template>

<script>
    export default {
        name: "rankDel",
        props:["allRankData"]
    }
</script>

<style scoped lang="less">
    .rank-box {
        margin-top: 20px;
        float: left;
        width: 33%;
        border: 1px solid #d3d3d3;
        padding-top: 10px;
        background-color: rgba(244,244,244,1);

        .rb-top {
            display: block;
            margin-bottom: 10px;
            padding-left: 10px;
            padding-right: 10px;

            img {
                display: block;
                width: 100%;
            }
        }

        > ul {
            li {
                height: 32px;
                line-height: 32px;
                color: #000;
                font-size: 12px;
                cursor: pointer;
                padding-left: 10px;
                padding-right: 10px;
                /*border-bottom: 1px solid #d3d3d3;*/
                &:nth-of-type(even){
                    background-color: rgba(232,232,232,1);
                }
                &:nth-of-type(odd){
                    background-color: rgba(244,244,244,1);
                }
                p {
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
                &:hover{
                    /*background-color: rgba(232,232,232,1);*/
                    text-decoration: underline;
                }
            }
        }

        a {
            display: block;
            height: 32px;
            line-height: 32px;
            font-size: 12px;
            color: #333;
            margin-right: 10px;

            &:hover {
                text-decoration: underline!important;
                color: #000;
            }
        }
    }
</style>
